<!--学员奖励信息列表-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right87">
        <div class="item-name">奖励类别：</div>
        <el-select v-model="dataForm.rdtype" placeholder="请选择" style="width: 110px" size="mini" clearable>
          <el-option v-for="item in typeList" :key="item.typeid" :label="item.typename" :value="item.typeid"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87">
        <div class="item-name">奖励级别：</div>
        <el-select v-model="dataForm.grade" placeholder="请选择" style="width: 110px" size="mini" clearable>
          <el-option v-for="item in gradeList" :key="item.gradeid" :label="item.gradename" :value="item.gradeid"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87">
        <div class="item-name">获奖名称：</div>
        <el-input v-model="dataForm.rdname" style="width: 110px" size="mini"></el-input>
      </div>
      <div class="right87">
        <span class="item-name">获奖日期：</span>
        <el-date-picker class="time"  v-model="dataForm.startDate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
        <span class="item-hr">-</span>
        <el-date-picker  class="time" v-model="dataForm.endDate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
      </div>
      <div class="search-container-item right87">
        <div class="item-name">学员队：</div>
        <el-select v-model="dataForm.studentdui" placeholder="请选择" style="width: 110px" size="mini" clearable>
          <el-option v-for="item in duiList" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87">
        <div class="item-name">姓名：</div>
        <el-input v-model="dataForm.studentName" style="width: 110px" size="mini"></el-input>
      </div>
      <div class="search-container-item right87">
        <div class="item-name">学号：</div>
        <el-input v-model="dataForm.studentCode" style="width: 110px" size="mini"></el-input>
      </div>
      <div class="search-button color-primary width70 right87" @click="search">
        <img src="../../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div class="search-button color-primary width70" @click="addInfo">
        <img src="../../../../assets/classHours/icon-addBig.png" alt="" />
        <span>新增</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  >
        <el-table-column prop="courseName" label="操作" align="center" width="350">
            <template slot-scope="scope">
              <div class="flex">
                 <span class="small-btn color-primary right22" @click="editInfo(scope.row.rewardInfoVO.rwid,2)">
                    <img src="../../../../assets/assessment/icon-search.png" alt="" /> 查看
                </span>
                <span class="small-btn edit-green right22" @click="editInfo(scope.row.rewardInfoVO.rwid,1)">
                    <img src="../../../../assets/assessment/icon-plan-record-detail.png"> 修改
                </span>
                <span class="small-btn delete-red" @click="deleteInfo(scope.row.rewardInfoVO.rwid)">
                    <img src="../../../../assets/assessment/icon-delete.png"> 删除
                </span>
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="rdname" label="获奖名称" align="center">
          <template slot-scope="scope">{{scope.row.rewardInfoVO.rdname}}</template>
        </el-table-column>
        <el-table-column prop="rdtypeName" label="奖励类别" align="center"> 
          <template slot-scope="scope">{{scope.row.rewardInfoVO.rdtypeName}}</template>
        </el-table-column>
        <el-table-column prop="gradeName" label="奖励级别" align="center">
          <template slot-scope="scope">{{scope.row.rewardInfoVO.gradeName}}</template>
        </el-table-column>
        <el-table-column prop="studentName" label="获奖人员" align="center" width="220">
            <template slot-scope="scope">
                <span class="editName">
                    {{scope.row.studentInfoVO.studentName}}<img @click="editName(scope.row.studentInfoVO.studentCode)" src="../../../../assets/assessment/icon-plan-record-detail.png">
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="rddate" label="获奖日期" align="center">
          <template slot-scope="scope">{{scope.row.rewardInfoVO.rddate}}</template>
        </el-table-column>
        <el-table-column prop="company" label="颁奖单位" align="center">
          <template slot-scope="scope">{{scope.row.rewardInfoVO.company}}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-block">
      <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import {rewardList,deleteReward} from "@/api/student";

export default {
  data() {
    return {
      typeList:[],//奖励类别
      gradeList:[],//奖励级别
      duiList:[],//学员队列表
      dataForm:{
        grade:'',//奖励级别
        rdtype:'',//奖励类别
        startDate:'',//开始日期
        endDate:'',//结束日期
        studentdui:'',//学员队
        studentName:'',//学员姓名
        studentCode:'',//学号
        size:50,
        current:1,
      },
      tableData: [],
      total:1
    };
  },
  mounted(){
    this.getList()
    //学员队列表
    this.commonApi.getStudentDuiData().then(res=>{
      this.duiList = res.data
    })
    //奖励类别
    this.commonApi.getRewardTypeList().then(res=>{
      this.typeList = res.records
    })
    //奖励级别
    this.commonApi.getGradeList().then(res=>{
      this.gradeList = res.records
    })
  },
  methods: {
      //查询
      search(){
        this.getList()
      },
      //当前页
      currentPage(e){
        this.dataForm.current = e;
        this.getList()
      },
      async getList(){
        let res = await rewardList(this.dataForm)
        this.tableData = res.data.records
        this.total =  res.total
      },
       deleteInfo(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await deleteReward({rwid:id})
          if(res.code == 200){
            this.$message.success('删除成功！');
            this.search()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          }); 
        });
      },
      //新增
      addInfo(){
          this.$router.push({
            path:'/student/disciplinaryInfo/reward/add'
          })
      },
      //跳转个人详情
      editName(studentCode){
        console.log(studentCode)
          this.$router.push({
            path:'/student/studentStatus/infoSearch',
            query:{
              studentCode:studentCode
            }
          })
      },
      //编辑
      editInfo(row,type){
          this.$router.push({
            path:'/student/disciplinaryInfo/reward/editInfo',
            query:{
                type:type,
                rwid:row
            }
          })
          
      }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.inputWidth{
    width: 190px;
    /deep/.el-input{
        width: 142px!important;
    }
}
.search-container {
  justify-content: flex-start !important;
  align-items: center;
}
.time{
  /deep/.el-input__inner{
          height: 28px;
          line-height: 28px;
          font-size: 12px;
      }
      /deep/.el-input__icon{
          font-size: 20px;
          margin-top: -4px;
      }
      /deep/.el-input__prefix{
          right: 16px;
      }
}
.width70{width: 70px;}
.input91{width: 91px;}
.right274{margin-right: 274px;}
.width130{width: 130px;}
.flex{
    display: flex;
    justify-content: center;
}
.right22{margin-right: 22px;}
.color-warning{
    background: #FEF1E8;
    border: 1px solid #F86900;
    >span{color:#F86900;}
    >img{width: 17px!important;height:17px!important}
}
.color-green{
    background:#F9F9F9;
    border: 1px solid #02C86C;
    >span{color: #02C86C;}
    >img{width: 17px!important;height:17px!important}
}
.right87{
    margin-right: 6px;
}
.item-name {
  color: #004ca7;
}
.item-hr{
    margin: 0 5px;
}
.delete-red{
  color: #FA5339;
  background: #FFEFEF;
  border: 1px solid #FA5339;
}
.edit-green{
    background: #F1FFF8;
    border: 1px solid #02C86C;
    color: #02C86C;
}
</style>
